<template>
  <div>
    <!-- 字典搜索表单 开始 -->
    <el-col :span="24">
      <el-form :inline="true" :model="queryDict">
        <el-form-item label="字典名称">
          <el-input v-model="queryDict.dictName" placeholder="字典名称" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryDict.dictStatus"
            placeholder="全部"
            clearable
          >
            <el-option label="全部" value="0" />
            <el-option label="正常" value="1" />
            <el-option label="禁用" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- 搜索表单 结束 -->
    <el-row>
      <!-- 功能按钮 开始 -->
      <el-col :span="24">
        <el-button style="margin: 5px 5px" type="primary" @click="editSelection"
          ><el-icon><EditPen /></el-icon>编辑</el-button
        >
        <el-button style="margin: 5px 5px" type="danger"
          ><el-icon><Delete /></el-icon>删除</el-button
        >
        <el-button
          @click="dialogSaveDictVisible = true"
          style="margin: 5px 5px"
          type="success"
          ><el-icon><Plus /></el-icon>新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 功能按钮 结束 -->
    <!-- 列表开始 -->
    <el-row>
      <el-col :span="24">
        <!-- 用户列表 在el-table中通过属性data绑定我们要显示的列表数据 -->
        <el-table
          :data="dicts"
          max-height="800"
          style="width: 100%"
          :stripe="true"
          :border="true"
          :fit="true"
          ref="dictTable"
        >
          <!-- 这里写列 -->
          <!-- type定义为selection,这一列会显示为复选框，自动实现全选功能 -->
          <el-table-column align="center" type="selection" />
          <!-- prop绑定要显示的属性的名字，label绑定列名 -->
          <el-table-column
            align="center"
            prop="dictId"
            label="编号"
            width="60"
          />
          <el-table-column align="center" prop="dictName" label="字典名称" />
          <el-table-column align="center" prop="dictType" label="字典类别">
            <template #default="scope">
              <el-link
                @click="showDictDataList(scope.row.dictId)"
                type="primary"
                >{{ scope.row.dictType }}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="dictNotes" label="字典备注" />
          <!-- 这里使用formatter绑定一个函数，用来格式化结果 -->
          <el-table-column align="center" prop="dictStatus" label="状态">
            <!-- 使用了table-column的插槽，显示对应的标签 -->
            <template #default="scope">
              <el-tag
                v-if="scope.row.dictStatus == 1"
                class="ml-2"
                type="success"
                >正常</el-tag
              >
              <el-tag class="ml-2" type="danger" v-else>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!-- 这里写的内容会放在默认的插槽中 -->
            <template #default="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格结束 -->
      </el-col>
    </el-row>
    <!-- 分页栏开始 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          :page-size="limit"
          :total="total"
          layout="prev, pager, next, jumper, ->, total"
          @currentChange="handlerCurrentChange"
        ></el-pagination>
      </el-col>
    </el-row>
    <!-- 分页栏结束 -->

    <!-- 添加字典的窗体开始 -->
    <el-dialog v-model="dialogSaveDictVisible" title="添加字典信息">
      <!-- 添加字典的表单 开始 -->
      <el-form :model="newDict">
        <el-form-item label="字典名称" :label-width="formLabelWidth">
          <el-input v-model="newDict.dictName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字典类别" :label-width="formLabelWidth">
          <el-input v-model="newDict.dictType" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字典备注" :label-width="formLabelWidth">
          <el-input v-model="newDict.dictNotes" autocomplete="off" />
        </el-form-item>
      </el-form>
      <!-- 添加字典的表单 结束 -->
      <template #footer>
        <span class="dialog-footer">
          <!-- 将显示窗体的属性修改为false的同时，将newUser置空 -->
          <el-button
            @click="
              dialogSaveDictVisible = false;
              this.newDict = {};
            "
            >取消</el-button
          >
          <el-button type="primary" @click="doSaveDict"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加字典的窗体结束 -->

    <!-- 字典字段列表窗体开始 -->
    <el-dialog v-model="dialogDictDataListVisible" width="80%" title="字典字段列表">
      <!-- 弹窗的默认插槽，显示列表的功能按钮和列表 -->
      <template #default>
        <!-- 嵌套弹窗 添加字典字段数据表单 开始 -->
        <el-dialog v-model="dialogDictDataSaveVisible" title="添加字段">
          <template #default>
            <el-form :model="newDictData">
              <el-form-item label="字段标签" :label-width="formLabelWidth">
                <el-input v-model="newDictData.dataTag" autocomplete="off" />
              </el-form-item>
              <el-form-item label="字段的值" :label-width="formLabelWidth">
                <el-input v-model="newDictData.dataValue" autocomplete="off" />
              </el-form-item>
              <el-form-item label="字段排序" :label-width="formLabelWidth">
                <el-input v-model="newDictData.dataOrder" autocomplete="off" />
              </el-form-item>
              <el-form-item label="字段备注" :label-width="formLabelWidth">
                <el-input v-model="newDictData.dataNodes" autocomplete="off" />
              </el-form-item>
            </el-form>
             <!-- 嵌套弹窗 添加字典字段数据表单 结束 -->
          </template>
          <!-- 下面是弹窗的关闭按钮 -->
          <template #footer>
            <span class="dialog-footer">
              <!-- 将显示窗体的属性修改为false的同时 -->
              <el-button @click="dialogDictDataSaveVisible = false"
                >关闭</el-button
              >
            </span>
            <span class="dialog-footer">
              <!-- 将显示窗体的属性修改为false的同时 -->
              <el-button @click="doSaveDictData"
                >提交</el-button
              >
            </span>
          </template>
        </el-dialog>
        <!-- 功能按钮 -->
        <el-row>
          <el-col :span="24">
            <el-button
              style="margin: 5px 5px"
              type="primary"
              @click="editDictDataSelection"
              ><el-icon><EditPen /></el-icon>编辑</el-button
            >
            <el-button style="margin: 5px 5px" type="danger"
              ><el-icon><Delete /></el-icon>删除</el-button
            >
            <el-button
              @click="showSaveDictDataWin"
              style="margin: 5px 5px"
              type="success"
              ><el-icon><Plus /></el-icon>新增</el-button
            >
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-row>
          <el-col :span="24">
            <!-- 字典的字段列表 在el-table中通过属性data绑定我们要显示的列表数据 -->
            <el-table
              :data="dictDatas"
              max-height="800"
              style="width: 100%"
              :stripe="true"
              :border="true"
              :fit="true"
              ref="dictDataTable"
            >
              <!-- 这里写列 -->
              <!-- type定义为selection,这一列会显示为复选框，自动实现全选功能 -->
              <el-table-column align="center" type="selection" />
              <!-- prop绑定要显示的属性的名字，label绑定列名 -->
              <el-table-column
                align="center"
                prop="dataId"
                label="编号"
                width="60"
              />
              <el-table-column align="center" prop="dataTag" label="字段标签" />
              <el-table-column align="center" prop="dataValue" label="字段值" />
              <el-table-column
                align="center"
                prop="dataOrder"
                label="字段排序"
              />
              <el-table-column
                align="center"
                prop="dataNotes"
                label="字典备注"
              />
              <!-- 这里使用formatter绑定一个函数，用来格式化结果 -->
              <el-table-column align="center" prop="dataStatus" label="状态">
                <!-- 使用了table-column的插槽，显示对应的标签 -->
                <template #default="scope">
                  <el-tag
                    v-if="scope.row.dataStatus == 1"
                    class="ml-2"
                    type="success"
                    >正常</el-tag
                  >
                  <el-tag class="ml-2" type="danger" v-else>禁用</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <!-- 这里写的内容会放在默认的插槽中 -->
                <template #default="scope">
                  <el-button
                    size="small"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 表格结束 -->
          </el-col>
        </el-row>
      </template>

      <!-- 下面是弹窗的关闭按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <!-- 将显示窗体的属性修改为false的同时，将newUser置空 -->
          <el-button @click="dialogDictDataListVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 字典字段列表窗体结束 -->
  </div>
</template>

<script>
import dictHttp from "../../../api/dict.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      queryDict: {}, // 查询表单绑定的对象
      dicts: [], // 数据列表
      limit: 10, // 每页大小
      total: 0, // 总条数
      currentPage: 1, // 当前页码
      dialogSaveDictVisible: false, // 添加字典的窗体是否显示
      newDict: {}, // 新增的对象
      dialogDictDataListVisible: false, // 字典字段列表窗体是否显示
      dictDatas: [], // 字典的字段数据列表
      dialogDictDataSaveVisible: false, // 新增字典字段数据的弹窗标识
      currentDictId:0,// 当前正在操作的字典的编号
      newDictData:{}, // 新添加的字典字段对象
    };
  },
  methods: {
    /**
     * 添加字典字段的提交按钮事件
     */
    doSaveDictData(){
      // 调用API保存字典字段数据
      dictHttp.saveDictData(this.newDictData,res=>{
        if (res.code == 200) {
          ElMessage({
            message: "添加成功",
            type: "success",
          });
          this.dialogDictDataSaveVisible = false;
          this.newDictData = {};
          // 刷新列表
          this.loadCurrentDictDataList();
        } else {
          ElMessage.error("保存失败");
        }
      })
    },
    /**
     * 新增字典数据的功能按钮事件
     */
    showSaveDictDataWin() {
      // 将当前正在操作的字典的编号保存到newDictData中
      this.newDictData.dictId = this.currentDictId;
      this.dialogDictDataSaveVisible = true; // 显示添加字典字段数据的窗体
    },
    /**
     * 显示字典的字段数据列表   字典类别的超链接的点击事件
     */
    showDictDataList(dictId) {
      this.dialogDictDataListVisible = true; // 展示字典字段列表窗体
      this.currentDictId = dictId;
      // dictHttp.listDictDataByDictId(dictId, (res) => {
      //   this.dictDatas = res.data; // 这里的data就是列表，不是IPage
      // });
      this.loadCurrentDictDataList();
    },
    /**
     * 加载当前正在操作的字典的字段列表
     */
    loadCurrentDictDataList(){
      dictHttp.listDictDataByDictId(this.currentDictId, (res) => {
        this.dictDatas = res.data; // 这里的data就是列表，不是IPage
      });
    },
    /**
     * 保存字典信息事件
     */
    doSaveDict() {
      dictHttp.save(this.newDict, (res) => {
        console.log(res);
        if (res.code == 200) {
          ElMessage({
            message: "添加成功",
            type: "success",
          });
          this.dialogSaveDictVisible = false;
          this.newDict = {};
          // 刷新列表
          this.loadDicts();
        } else if (res.code == 300) {
          ElMessage({
            message: "字典类别重复",
            type: "warning",
          });
        } else {
          ElMessage.error("保存失败");
        }
      });
    },
    /**
     * 加载dict数据
     */
    loadDicts() {
      dictHttp.list(this.queryDict, this.currentPage, this.limit, (res) => {
        // 这里的res就是我们的qdResut
        this.dicts = res.data.records;
        this.total = res.data.total;
      });
    },
    /**
     * 翻页触发的事件，传入的参数是最新的页码
     */
    handlerCurrentChange(value) {
      this.currentPage = value;
      this.loadDicts();
    },
    /**
     * 行删除按钮事件
     */
    handleDelete(index, row) {},
    /**
     * 行编辑按钮事件
     */
    handleEdit(index, row) {},
    /**
     * 格式化字典状态
     * @param row 正行数据对象
     * @param column 列
     * @param cellValue 当列的数据
     * @param index 索引
     */
    formatterStatus(row, column, cellValue, index) {
      console.log(cellValue);
      return cellValue == 1 ? "正常" : "停用";
    },
    /**
     * 编辑功能按钮的事件
     */
    editSelection() {},
    /**
     * 查询按钮事件
     */
    doQuery() {
      this.loadDicts();
    },
  },
  mounted() {
    // 加载数据
    this.loadDicts();
  },
};
</script>

<style>
</style>